<template>
  <view :style="colorStyle">
    <navTitle :title="'会员中心'" :styleType="'black'" />
    <image
      src="http://xpj40szpt.signalpha.cn/img/img92.png"
      class="topbg"
      mode="widthFix"
    />

    <view
      class="ruleModule cfff f28"
      @click="gourl(`/pages/user/xieyi?key=levelRule&title=规则说明`)"
    >
      规则说明
    </view>
    <view class="infobox1">
      <!-- <image
        :src="http://xpj40szpt.signalpha.cn/img/img93.png"
        class="bg"
        mode="widthFix"
      ></image> -->
      <image :src="levelInfo.levelImg" class="bg" mode="widthFix"></image>
      <view class="block1 flex aitems">
        <image :src="info.avatar" mode=""></image>
        <view
          class="info1 cfff f32 fontWeight"
          :style="{ color: `var(--view-theme)` }"
        >
          {{ info.nickName }}
        </view>
      </view>
      <view class="block2" :style="{ color: `var(--view-theme)` }">
        {{ level[info.level] }}
      </view>
      <view class="block3">
        <view class="info1 c084E57 f24" :style="{ color: `var(--view-theme)` }">
          今日获得经验值 {{ levelInfo.extDay }} 点，距离下个等级还需
          {{ levelInfo.extNext - levelInfo.extNow }} 经验值
        </view>
        <view class="info2">
          <view class="tip1" :style="{ width: `${levelInfo.percentage}%` }">
          </view>
        </view>
      </view>
    </view>

    <view class="infobox2">
      <view
        class="block1 c5CCEDD f40 fontWeight"
        :style="{ color: `var(--view-theme)` }"
      >
        获取经验
      </view>
      <view class="block2 flex aitems between cfff">
        <view class="left flex aitems">
          <image src="@/static/img94.png" mode=""></image>
          <view class="info1" :style="{ color: `var(--view-theme)` }">
            <view class="tip1 f32 fontWeight"> 签到 </view>
            <view class="tip2 f24"> 每日签到可获得经验 </view>
          </view>
        </view>
        <view
          class="right cfff f24"
          v-if="!signInfo.todaySignFlag"
          @click="gourl(`/pages/signIn/index`)"
          :style="{ background: `var(--view-theme)` }"
        >
          去完成
        </view>
        <view class="right2 cfff f24" v-if="signInfo.todaySignFlag">
          已完成
        </view>
      </view>
      <view class="block2 flex aitems between cfff">
        <view class="left flex aitems">
          <image src="@/static/img96.png" mode=""></image>
          <view class="info1" :style="{ color: `var(--view-theme)` }">
            <view class="tip1 f32 fontWeight"> 去下单 </view>
            <view class="tip2 f24"> 下单可获得经验 </view>
          </view>
        </view>
        <view
          class="right cfff f24"
          @click="gourl(`/pages/cate/cate`)"
          :style="{ background: `var(--view-theme)` }"
        >
          去完成
        </view>
        <!-- 		<view class="right2 cfff f24">
					已完成
				</view> -->
      </view>
    </view>
    <view class="infobox3">
      <image
        src="http://xpj40szpt.signalpha.cn/img/img97.png"
        mode="widthFix"
        @click="gourl(`/pages/user/experience`)"
      ></image>
    </view>
  </view>
</template>

<script>
import {
  userinfo,
  levelList,
  levelNow,
  userSignInfo,
  config,
  levelLogPage,
} from "@/servers/servers.js";
import { HTTP_STATUS } from "@/servers/config.js";
import colors from "@/mixins/color";
import { getToken } from "../../utils/storage";
import { go, loading } from "../../utils/wxAPI";
import { formatDate } from "@/utils/util.js";
export default {
  mixins: [colors],
  data() {
    return {
      info: {},
      level: {},
      levelInfo: {},
      year: new Date().getFullYear(),
      month: new Date().getMonth() + 1,
      signInfo: {},
      configInfo: {},
      total: 0,
    };
  },
  async onShow() {
    if (getToken()) {
      await this.levelList();
      this.userinfo();
      this.levelNow();
      this.userSignInfo();
      this.config();
      this.levelLogPage();
    }
  },
  methods: {
    async levelLogPage() {
      let { data } = await levelLogPage({
        current: 1,
        size: 1,
        sourceType: "social",
        createTimeBegin: formatDate(Date.now()).dateValue + " 00:00:00",
        createTimeEnd: formatDate(Date.now()).dateValue + " 23:59:59",
      });
      if (data.code == HTTP_STATUS.RUSELT_SUCCESS) {
        let total = data.data.total;
        this.total = total;
        // this.configInfo = JSON.parse(data.data);
        // console.log(this.configInfo)
      }
    },
    async config() {
      let { data } = await config({
        key: "social",
      });
      if (data.code == HTTP_STATUS.RUSELT_SUCCESS) {
        this.configInfo = JSON.parse(data.data);
        console.log(this.configInfo);
      }
    },
    async userSignInfo() {
      let { data } = await userSignInfo({
        year: this.year,
        month: this.month,
      });
      if (data.code == HTTP_STATUS.RUSELT_SUCCESS) {
        this.signInfo = data.data;
      }
    },
    async levelNow() {
      loading();
      let { data } = await levelNow();
      if (data.code == HTTP_STATUS.RUSELT_SUCCESS) {
        let info = data.data;
        this.levelInfo = info;
        let percentage = Number(info.extNow / info.extNext) * 100;
        this.levelInfo.percentage =
          Number(percentage) > 100 ? 100 : Number(percentage).toFixed(0);
      }
      uni.hideLoading();
    },
    async levelList() {
      loading();
      let { data } = await levelList();
      if (data.code == HTTP_STATUS.RUSELT_SUCCESS) {
        let list = data.data;
        let obj = {};
        for (let key of list) {
          obj[key.id] = key.name;
        }
        this.level = obj;
      }
      uni.hideLoading();
    },
    async userinfo() {
      loading();
      let { data } = await userinfo();
      if (data.code == HTTP_STATUS.RUSELT_SUCCESS) {
        let info = data.data;
        this.info = info;
      }
      uni.hideLoading();
      uni.stopPullDownRefresh();
    },
    gourl(url) {
      go(url);
    },
  },
  async onPullDownRefresh() {
    await this.levelList();
    this.userinfo();
    this.levelNow();
    this.userSignInfo();
    this.config();
    this.levelLogPage();
  },
};
</script>
<style>
/* #ifdef MP-WEIXIN */
page {
  background: #fff;
}

/* #endif */
</style>
<style lang="scss" scoped>
page {
  background: #fff;
}

.topbg {
  position: absolute;
  width: 100%;
  top: 0;
}

.ruleModule {
  position: fixed;
  width: 172rpx;
  height: 64rpx;
  border-radius: 28rpx 0 0 28rpx;
  right: 0;
  top: 66rpx;
  z-index: 9;
  background: rgba(0, 0, 0, 0.4);
  line-height: 64rpx;
  text-align: center;
}

.infobox1 {
  position: relative;
  margin: 30rpx 0 0;
  width: 100%;

  .bg {
    // position: absolute;
    width: 100%;
  }

  .block1 {
    position: absolute;
    z-index: 1;
    top: 190rpx;
    left: 60rpx;

    image {
      width: 56rpx;
      height: 56rpx;
      border-radius: 57rpx;
    }

    .info1 {
      margin-left: 16rpx;
    }
  }

  .block2 {
    color: #fff;
    text-shadow: 4rpx 2rpx 2rpx #5ccedd;
    font-family: Arial;
    font-size: 88rpx;
    font-style: italic;
    font-weight: 700;
    line-height: normal;
    letter-spacing: 5rpx;
    text-transform: uppercase;
    position: absolute;
    top: 250rpx;
    left: 60rpx;
  }

  .block3 {
    position: absolute;
    left: 60rpx;
    top: 400rpx;

    .info1 {
    }

    .info2 {
      margin: 16rpx 0 0;
      width: 310rpx;
      height: 12rpx;
      border-radius: 16rpx;
      background: #fff;

      .tip1 {
        width: 50%;
        height: 12rpx;
        border-radius: 16rpx;
        background: #084e57;
      }
    }
  }
}

.infobox2 {
  position: relative;
  top: -40rpx;
  z-index: 11;
  margin: 0 28rpx 0;
  border-radius: 40rpx;
  background: linear-gradient(
    102deg,
    rgba(92, 206, 221, 0.06) 0%,
    rgba(255, 255, 255, 0.06) 100%
  );
  box-shadow: 0px 0px 94.4rpx 0px rgba(92, 206, 221, 0.04) inset;
  padding: 40rpx 28rpx;

  .block1 {
  }

  .block2 {
    margin: 32rpx 0 0;

    .left {
      image {
        width: 80rpx;
        height: 80rpx;
      }

      .info1 {
        margin-left: 16rpx;
        width: calc(100% - 80rpx);

        .tip1 {
        }

        .tip2 {
          margin: 4rpx 0 0;
        }
      }
    }

    .right {
      padding: 12rpx 24rpx;
      border-radius: 40rpx;
      background: #5ccedd;
    }

    .right2 {
      padding: 12rpx 24rpx;
      border-radius: 40rpx;
      background: #5a6465;
    }
  }
}

.infobox3 {
  margin: 120rpx 0 0;

  image {
    width: 100%;
    margin: auto;
  }
}
</style>
